<!-- 导入地图 -->
<template>
	<view class="content">
		<view class="wrapperBox">
			<view id="wrapper"></view>
		</view>
	</view>
</template>

<script>
	let mapObj = null; // 生成组件实例

	window.mapInit = function() { // 挂载地图实例
		mapObj = new TMap.Map("wrapper", {
			center: new TMap.LatLng(40.65798,109.84031), // 地图初始坐标
			zoom: 14, // 缩放等级
			mapStyleId: 'style1', // 地图样式
			zoomControl: false, // 设置是否启用缩放控件
		});
		
		mapObj.on("click", function(evt) { // 地图全局事件
			mapObj.setCenter(new TMap.LatLng(evt.latLng.getLat().toFixed(6), evt.latLng.getLng().toFixed(6)))
		})
	}
	export default {
		data() {
			return {
				key: 'EBABZ-ILNLQ-CXO5V-4IEDG-V5GPO-2HBIE',
			}
		},
		onLoad() {
			// #ifdef H5
			this.loadScrpit();
			// #endif
		},
		created() {},
		methods: {
			// 初始化
			loadScrpit() { // 挂载js
				var script = document.createElement('script');
				script.src =
					`https://map.qq.com/api/gljs?v=1.exp&key=${this.key}&libraries=visualization&callback=mapInit`;
				document.body.appendChild(script);
			},
		}
	}
</script>

<style>
	.content {
		position: fixed;
		top: 0;
		left: 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	
	.wrapperBox {
		position: relative;
		width: 100vw;
		height: 100vh;
		z-index: 1;
	}

	#wrapper {
		z-index: 20;
		width: 120vw;
		height: 120vh;
		top: -10vh;
		left: -10vw;
		position: absolute;
	}
</style>